import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from "@angular/core";
import {SharedService} from "../shared-service";
import {CommService} from "../comm-service";
import {MyhttpService} from "../myhttp.service";

declare var $: any;

@Component({
  template: `
    <div class="gjxx comp" [style.width]="compw" [style.height]="comph" [style.top]="topv"
         [style.left]="leftv">
      <div class="content">
        <div class="title">
          <div class="title_text">{{comptitle}}</div>
        </div>
        <div class="body">
          <div class="gjxxRoom">
            <table class="table">
              <thead>
              <tr>
                <th width="9%">出库异常</th>
                <th width="9%">入库异常</th>
                <th width="11%">试卷位置异常</th>
                <th width="9%">超时停留</th>
                <th width="9%">超速行驶</th>
                <th width="9%">路线偏移</th>
                <th width="9%">离线告警</th>
                <th width="9%">多拉</th>
                <th width="9%">少拉</th>
                <th width="9%">错拉</th>
                <th width="8%">故障</th>
              </tr>
              </thead>
              <tbody *ngIf="gjinfo">
              <tr>
                <td>
                  <div *ngFor="let item of gjinfo.ckycBjxxList" class="ycitem" [title]="item.bjxq"><i
                    class="fa fa-warning"></i></div>
                </td>
                <td>
                  <div *ngFor="let item of gjinfo.rkycBjxxList" class="ycitem"><i class="fa fa-warning"></i></div>
                </td>
                <td>
                  <div *ngFor="let item of gjinfo.sjwzycBjxxList" class="ycitem"><i class="fa fa-warning"></i></div>
                </td>
                <td>
                  <div *ngFor="let item of gjinfo.cstlBjxxList" class="ycitem"><i class="fa fa-warning"></i></div>
                </td>
                <td>
                  <div *ngFor="let item of gjinfo.csBjxxList" class="ycitem"><i class="fa fa-warning"></i></div>
                </td>
                <td>
                  <div *ngFor="let item of gjinfo.ccwlBjxxList" class="ycitem"><i class="fa fa-warning"></i></div>
                </td>
                <td>
                  <div *ngFor="let item of gjinfo.lxBjxxList" class="ycitem"><i class="fa fa-warning"></i></div>
                </td>
                <td>
                  <div *ngFor="let item of gjinfo.sjdlBjxxList" class="ycitem"><i class="fa fa-warning"></i></div>
                </td>
                <td>
                  <div *ngFor="let item of gjinfo.sjslBjxxList" class="ycitem"><i class="fa fa-warning"></i></div>
                </td>
                <td>
                  <div *ngFor="let item of gjinfo.sjclBjxxList" class="ycitem"><i class="fa fa-warning"></i></div>
                </td>
                <td>
                  <div *ngFor="let item of gjinfo.gzBjxxList" class="ycitem"><i class="fa fa-warning"></i></div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: [
    ".gjxx{position:absolute;background-color:#fff;border:5px solid #ccc;}",
    ".content{width: calc(100%);height: calc(100%);}",
    ".content>.title{position: relative;width: 100%;height: auto;padding: 10px; border-bottom: 1px solid #ccc; color: rgb(138 143 151);}",
    ".title>.title_text{height: 15px;line-height: 15px;font-size: 15px;  width: auto;border-left: 5px solid #1477F3;padding-left: 10px}",
    ".title_btns{position: absolute;right: 0px;top: 0px;width: 60px;height: 24px;line-height: 24px}",
    ".title_btns>span:first-child{display: inline-block;width: 30px;text-align: center;font-size: 18px;cursor: pointer}",
    ".title_btns>span:last-child{display: inline-block;width: 30px;text-align: center;font-size: 20px;cursor: pointer}",
    ".content>.body{position: relative;width: 100%;height: calc(100% - 24px);padding: 16.5px 10px;}",
    ".gjxxRoom{width: calc(100%);height: calc(100%);}",
    "table{margin-bottom: 0px;height: 100%}",
    "th{background-color: rgb(206, 232, 255);text-align: center; border-right: 2px solid #ffffff;border-bottom: 1px solid #ffffff!important;}",
    "td{background-color: rgb(206, 232, 255);text-align: center; border-right: 2px solid #ffffff;height: 218px;border-top: 1px solid #ffffff!important;}",
    ".ycitem{width: 30px;height: 30px;float: left;color: red;margin: 5px;font-size: 20px;cursor: pointer}"
  ]
})
export class ZhzsGjxxComponent implements OnInit, OnDestroy {
  compw: string = "0px";
  comph: string = "0px";
  topv: string = "0px";
  leftv: string = "0px";
  comptitle: string = "告警信息";

  s_kqbh: string = "";
  s_ksjhbh: string = "";
  gjinfo: any;

  getData(): void {
    if (!this.s_kqbh || !this.s_ksjhbh) {
      return
    }
    this.gjinfo = {
      ckycBjxxList: [{
        bjxxbh: 1,
        bjxx: "",
        bjxq: "i am warning  info",
        bjsj:"2021-04-19"
      }]
    }
    const url = "sjgz/zsymlsfw/bjxxzs";
    this.itservice.kwPtPost(url, {
      kqbh: this.s_kqbh,
      ksjhbh: this.s_ksjhbh
    }).subscribe(resp => {
      this.commservice.handResponse("get", url, resp, (arg1, resp, arg2) => {
        if (arg1) {
          if (arg2) {
            const obj = resp ? resp : null;
            if (!obj) {
              return
            }
            this.gjinfo = obj;
          }
        }
      });
    });
  }

  /**
   * 组件在 显示面板中的位置+ 大小
   */
  initcompPositionSize_ctrshow(): void {
    // 大小 位置
    this.compw = this.o.compw + "px";
    this.comph = this.o.comph + "px";
    this.topv = this.o.topv + "px";
    this.leftv = this.o.leftv + "px";
    // 显示
    const lastsearchlx = this.o.paramchangelx;
    const compdata = this.o.paramchangedata;
    if (lastsearchlx === "pcompkqchange") {
      this.s_kqbh = compdata.kqbh;
      this.s_ksjhbh = compdata.ksjhbh;
      this.getData();

    } else {
      this.s_kqbh = compdata.kqbh;
      this.s_ksjhbh = compdata.ksjhbh;
      this.getData();
    }
  }

  @Input() o: any;
  @Output() outhander: EventEmitter<any> = new EventEmitter<any>();

  constructor(private commservice: CommService,
              private itservice: MyhttpService,
              private sharedService: SharedService) {
    this.sharedService.changeEmitted$.subscribe(resp => {
      const actiontype = resp.actiontype;
      const frompage = resp.frompage;
      const paramchangelx = resp.paramchangelx;
      const paramchangedata = resp.paramchangedata;
      switch (frompage) {
        case "zhzs": {
          if (paramchangelx === "pcompkqchange") {
            this.s_kqbh = paramchangedata.kqbh;
            this.s_ksjhbh = paramchangedata.ksjhbh;
            this.getData();
          }
        }
          break;
      }
    });
  }

  ngOnInit() {
    this.commservice.log("-- 【 compkey=gjxx】--被父组件动态加载init....", this.o);
    this.initcompPositionSize_ctrshow();
  }

  ngOnDestroy() {

  }

}
